<template>
    <div>
        <!-- :on-reach-top="handleReachTop" -->
        <Scroll :on-reach-bottom="handleReachBottom" height = 756>
        <List header="在线音乐" border>
            <ListItem
            v-for="(item,index) in musicAllListData"
            :key="index"
            class="listCor"
            >
            <div @click="onClickListItem(item,item.songname,'songname')"  class="list-item">{{item.songname}}</div>
            <div @click="onClickListItem(item,item.singer[0].name,'name')"  class="list-item">{{item.singer[0].name}}</div>
            <div @click="onClickListItem(item,item.albumname,'albumname')"  class="list-item">{{item.albumname}}</div>
            <div class="list-item-time">{{item.pubtime}}</div>
            <div class="list-item-controls" @click="onClickListItem(item,item.pubtime,'pubtime')"><span><Icon type="ios-play" /></span></div>
            </ListItem>
        </List>
        </Scroll>
    </div>
</template>

<script>
import musicApi from "@/Apis/musicApis";
// import userApi from "@/Apis/userApi";
import eventBus from '@/utils/bus'

export default {
    data() {
        return {
            serchValue:'',
            serchFlag : false,
            musicAllListData:[],
            musicListData:{
                columns:[
                    {title:"歌曲",key:'music'},
                    {title:"歌手",key:'singer'},
                    {title:"专辑",key:'album'},
                    {title:"时长",key:'time'},
                ],
                list:[]
            },
            playMusicList:[],
            musicControl:{
                palyMusicId:''
            },
            //分页
            paging:{
                pageNo:1,//页码默认1
                pageSize:20,//默认20
                t:0,    //搜索类型 默认为 0 // 0：单曲，2：歌单，7：歌词，8：专辑，9：歌手，12：mv
            }
        }
    },
    methods: {
        //搜索歌曲
        serchSong(keyword) {
            this.musicListData.list = []
            this.serchValue = keyword 
            this.playMusicList = []
            // || this.$route.params.keyword    
            musicApi
                .searchMusic({
                    key: this.serchValue,
                    pageNo:this.paging.pageNo,
                    pageSize:this.paging.pageSize,
                    t:this.paging.t
                }).then(res => {
                    console.log(res);
                    if(!this.serchFlag){
                        this.musicAllListData = res.data.data.list
                    }
                        else {
                            for(let i in res.data.data.list){
                                this.musicAllListData.push(res.data.data.list[i])
                            }
                        }     
                    console.log(this.musicAllListData,'show');
                    this.musicAllListData.map(value =>{ 
                        this.playMusicList.push(value.songmid)
                    })
                    eventBus.$emit('sendPlayMusicList', this.playMusicList)
                })
        },
        // 获取播放音乐地址
        palyMusic(){
            musicApi
                .palyMusicApi({
                    id:this.musicControl.palyMusicId
                }).then(res =>{
                    eventBus.$emit('musicUrl',res.data.data)
                    console.log(res);
                })
        },
        //点击信息
        onClickListItem(v1,v2,v3){
            console.log(v1,v2,v3);
            this.musicControl.palyMusicId = v1.songmid
            this.palyMusic()
        },
        //向上无限滚动
        // handleReachTop () {
        //      return new Promise(resolve => {
        //             setTimeout(() => {
        //                 this.paging.pageNo--
        //                 this.serchSong(this.serchValue)
        //                 console.log(this.serchValue);
        //                 resolve();
        //             }, 1000);
        //         });
        //  },
        //向下无限滚动
         handleReachBottom () {
             this.serchFlag = true
             return new Promise(resolve => {
                    setTimeout(() => {
                        this.paging.pageNo++
                        this.serchSong(this.serchValue)
                        console.log(this.serchValue);
                        resolve();
                    }, 2000);
                });
         },
        // getCookieApi(){
        //     userApi
        //         .getCookie({
        //             id:'2542354742',
        //         }).then(res =>{
        //             console.log(res);
        //         })
        // },
        // showCookie(){
        //     userApi
        //         .showCookie({}).then(res =>{
        //             console.log('cookie');
        //         })
        // },
        setCookie(name, value, exdays) {
            let cookie = name + "=" + value + ";";
            if (exdays) {
              let d = new Date();
              d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
              let expires = "expires=" + d.toGMTString();
              cookie = cookie + ' ' + expires;
            }
            document.cookie = cookie;
        },
        cookie(){
            this.setCookie("euin","ow4Powok7eSPoc**",30)
            this.setCookie("qqmusic_key","Q_H_L_5Sd3l8GeYWlXiinMQv_bsSLzu1LaWMsd74tq3ffX1_JO02RHgOq0sGQ**",30)
            this.setCookie("wxrefresh_token","",30)
            this.setCookie("psrf_qqaccess_token","DAE14AC0FE82EDAC4958F26DAB44D2C8",30)
            this.setCookie("fqm_sessionid","47d5ff3a-b427-4c42-af43-5fdc5e9dffc8",30)
            this.setCookie("o_cookie","2542354742",30)
            this.setCookie("uin_cookie","o2542354742",30)
            this.setCookie("wxopenid","",30)
            this.setCookie("psrf_musickey_createtime","1652357389",30)
            this.setCookie("psrf_access_token_expiresAt","1660133389",30)
            this.setCookie("tmeLoginType","2",30)
            this.setCookie("ts_refer","jsososo.github.io/",30)
            this.setCookie("psrf_qqopenid","0A748DD0088BE1A6A6665156FD31E036",30)
            this.setCookie("wxunionid","",30)
            this.setCookie("pac_uid","0_6cce2b0b93afb",30)
            this.setCookie("login_type","1",30)
            this.setCookie("_qpsvr_localtk","0.7095145082351875",30)
            this.setCookie("psrf_qqunionid","129AE5A31F23EE5B3A324CB4B6E47EFF",30)
            this.setCookie("ts_last","y.qq.com/",30)
            this.setCookie("pgv_info","ssid=s9150232444",30)
            this.setCookie("iip","0",30)
            this.setCookie("qm_keyst","Q_H_L_5Sd3l8GeYWlXiinMQv_bsSLzu1LaWMsd74tq3ffX1_JO02RHgOq0sGQ",30)
            this.setCookie("fqm_pvqid","2e1fafaf-898b-4dd9-b7ad-e555100de8e4",30)
            this.setCookie("qm_keyst","4fe56712ad274656",30)
            this.setCookie("o_cookie","Q_H_L_5Sd3l8GeYWlXiinMQv_bsSLzu1LaWMsd74tq3ffX1_JO02RHgOq0sGQ",30)
            this.setCookie("ts_uid","4860039258",30)
            this.setCookie("ied_qq","o2542354742",30)
            this.setCookie("ptcz","062b27bd90d738ccabddae68aaf0c299c3bb28246bc8f6516ab98f335ed603d2",30)
            this.setCookie("psrf_qqrefresh_token","03B328518C57467884143BA569A5B106",30)
            this.setCookie("RK","BanpwaL19O",30)
            this.setCookie("pgv_pvid","1267017904",30)
            this.setCookie("uin","2542354742",30)
            this.setCookie("eas_sid","x1Y6I5F1t2l9C4g6V0M1v2u6G2",30)
        }
    },
    created() {
        //设置COOKIE
        // this.getCookieApi()
        // 查看Cookie
        // this.showCookie()
        //QQMusic上自己的数据
        this.cookie()
        eventBus.$on('sendSerchValue', (keyword) => {
            this.serchSong(keyword)
            this.serchFlag = false
        })
    },
    mounted() {
        
    }
}
</script>

<style scoped>
.listCor{
    display: flex;
    justify-content:space-around;
}
.list-item,.list-item-time{
    width: 150px;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
    cursor: pointer;
}
.list-item:hover{
    color: rgb(93, 142, 187);
}
.ivu-list-items{
    background: white;
}

.list-item-controls{
    width: 80px;
    cursor: pointer;
    opacity: 0;
}
.listCor:hover .list-item-controls{
    opacity: 1;
}


.ivu-icon{
    font-size: 22px;
    color: #808080;
}
</style>